import React, { useState, useCallback } from 'react'
import { Form, Input, Button, Toast, NavBar, Divider } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import request from '../../api/request.tsx'
import { encryptPassword } from '../../utils/rsa'
import './index.css'

/**
 * 注册表单数据类型定义
 */
interface RegisterForm {
  email: string        // 邮箱地址
  code: string         // 验证码
  password: string     // 密码
  confirmPassword: string // 确认密码
  invitationCode?: string // 邀请码（可选）
}

/**
 * 用户注册页面组件
 * 包含邮箱验证、验证码发送、密码加密等功能
 */
const Register: React.FC = () => {
  // 表单实例
  const [form] = Form.useForm()
  // 注册按钮加载状态
  const [loading, setLoading] = useState(false)
  // 验证码按钮加载状态
  const [codeLoading, setCodeLoading] = useState(false)
  // 验证码倒计时
  const [countdown, setCountdown] = useState(0)
  // 路由导航
  const navigate = useNavigate()

  /**
   * 邮箱格式验证
   * 使用正则表达式验证邮箱格式是否正确
   * @param email 邮箱地址
   * @returns 是否为有效邮箱格式
   */
  const validateEmail = (email: string): boolean => {
    // 邮箱格式正则表达式：用户名@域名.顶级域名
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
  }

  /**
   * 开始验证码倒计时
   * 设置60秒倒计时，防止用户频繁发送验证码
   */
  const startCountdown = useCallback(() => {
    setCountdown(60)
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer) // 清除定时器
          return 0
        }
        return prev - 1
      })
    }, 1000)
  }, [])

  /**
   * 发送验证码
   * 验证邮箱格式后调用API发送验证码
   */
  const sendCode = () => {
    // 获取表单中的邮箱
    const emailRaw = form.getFieldValue('email')
    const email = typeof emailRaw === 'string' ? emailRaw.trim() : emailRaw
    if (!email) {
      Toast.show('请输入邮箱')
      return
    }
    
    // 验证邮箱格式
    if (!validateEmail(email)) {
      Toast.show('请输入正确的邮箱格式')
      return
    }

    setCodeLoading(true)

    // 调用发送验证码API（then/catch/finally 与首页一致）
    request.post('/health/user/v1/sendOutEmailCode', { email }).then((res) => {
      if (res.status === 200 && res.data?.status === '0000') {
        Toast.show('验证码发送成功')
        startCountdown()
      } else {
        Toast.show({ icon: 'fail', content: res.data?.message || '验证码发送失败', duration: 3000 })
      }
    }).catch((error) => {
      const isTimeout = error?.code === 'ECONNABORTED' || /timeout/i.test(error?.message || '')
      const backendMessage = error?.response?.data?.message
      Toast.show(isTimeout ? '请求超时，请稍后再试' : (backendMessage || '验证码发送失败'))
      console.error('发送验证码错误:', error)
    }).finally(() => {
      setCodeLoading(false)
    })
  }

  /**
   * 注册表单提交处理
   * 加密密码后调用注册API
   * @param values 表单数据
   */
  const onFinish =  (values: RegisterForm) => {
    setLoading(true)
    
    // 使用RSA加密密码
    const encryptedPassword = encryptPassword(values.password)
    
    // 构造注册请求数据
    const registerData = {
      email: values.email,
      code: values.code,
      pwd1: encryptedPassword, // 加密后的密码
      pwd2: encryptedPassword, // 确认密码（后端要求）
      invitationCode: values.invitationCode || undefined
    }

    // 调用注册API（then/catch/finally 与首页一致）
    request.post('/health/user/v1/register', registerData).then((res) => {
      if (res.status === 200 && res.data?.status === '0000') {
        Toast.show({
          icon: 'success',
          content: '注册成功，即将跳转到登录页面',
          duration: 2000
        })
        setTimeout(() => navigate('/login'), 2000)
      } else {
        Toast.show({
          icon: 'fail',
          content: res.data?.message || '注册失败',
          duration: 3000
        })
      }
    }).catch((error) => {
      const backendMessage = error?.response?.data?.message
      Toast.show(backendMessage || '注册失败，请稍后重试')
      console.error('注册错误:', error)
    }).finally(() => {
      setLoading(false)
    })
  }

  return (
    <div className="register-container">
      {/* 顶部导航栏 */}
      <NavBar className="sticky-navbar" onBack={() => navigate('/login')}>用户注册</NavBar>
      
      <div className="register-content">
        {/* 注册表单 */}
        <Form
          form={form}
          onFinish={onFinish}
          layout='vertical'
          footer={
            <Button block type='submit' color='primary' size='large' loading={loading}>
              注册
            </Button>
          }
        >
          {/* 邮箱输入框 */}
          <Form.Item 
            name='email' 
            label='邮箱' 
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email' as const, message: '请输入正确的邮箱格式' }
            ]}
          >
            <Input placeholder='请输入邮箱' />
          </Form.Item>

          {/* 验证码输入框 */}
          <Form.Item 
            name='code' 
            label='验证码' 
            rules={[
              { required: true, message: '请输入验证码' },
              { len: 6, message: '验证码为6位数字' }
            ]}
            extra={
              <Button
                size='small'
                onClick={sendCode}
                loading={codeLoading}
                disabled={countdown > 0}
              >
                {countdown > 0 ? `${countdown}s后重发` : '发送验证码'}
              </Button>
            }
          >
            <Input placeholder='请输入6位验证码' maxLength={6} />
          </Form.Item>

          {/* 密码输入框 */}
          <Form.Item 
            name='password' 
            label='密码' 
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码至少6位' }
            ]}
          >
            <Input placeholder='请输入密码' type='password' />
          </Form.Item>

          {/* 确认密码输入框 */}
          <Form.Item 
            name='confirmPassword' 
            label='确认密码' 
            rules={[
              { required: true, message: '请确认密码' },
              // 自定义验证器：检查两次密码是否一致
              ({ getFieldValue }) => ({
                validator(_: unknown, value: string) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve()
                  }
                  return Promise.reject(new Error('两次输入的密码不一致'))
                },
              }),
            ]}
          >
            <Input placeholder='请再次输入密码' type='password' />
          </Form.Item>

          {/* 邀请码输入框（可选） */}
          <Form.Item name='invitationCode' label='邀请码（选填）'>
            <Input placeholder='请输入邀请码' />
          </Form.Item>
        </Form>

        {/* 注册说明 */}
        <Divider>注册说明</Divider>
        <div className="register-tips">
          <p>• 请使用真实邮箱进行注册</p>
          <p>• 验证码将发送到您的邮箱</p>
          <p>• 密码将进行加密处理</p>
          <p>• 邀请码为可选项目</p>
        </div>
      </div>
    </div>
  )
}

export default Register
